<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<meta name="renderer" content="webkit" />

		<meta name="robots" content="index, follow" />

		<title>预约到店</title>

		<meta name="keywords" content="" />

		<meta name="description" content="" />

		<meta name="author" content="order by website" />

		<script type="text/javascript" src="__XIAOHE__/js/jquery.min.js"></script>

		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"

		 crossorigin="anonymous"></script>

		<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/bootstrap.min.css" media="screen" />

		<script src="__XIAOHE__/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/style.css" />

		<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/swiper.min.css" />

		<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/animate.css" />

		<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/font-awesome.min.css" />

		<!-- 引入样式文件 -->

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">



		<!-- 引入 Vue 和 Vant 的 JS 文件 -->

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

		<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>

		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>

	<body>

		<div id="app">

			<div class="row">

				<div class="col-xs-12" style="padding: 0;">

					<div class="hyyjfk">

						<div class="myswiper">

							<div class="swiper-container swiper-no-swiping">

								<div class="swiper-wrapper">

<!--这里是图片-->
<div class="swiper-slide" style="background: url(__XIAOHE__/mentoutu/1.jpg) no-repeat center;background-size: 100%;"></div>



									<div class="swiper-slide" style="background: url(__XIAOHE__/mentoutu/2.jpg) no-repeat center;background-size: 100%;"></div>

									<div class="swiper-slide" style="background: url(__XIAOHE__/mentoutu/3.jpg) no-repeat center;background-size: 100%;"></div>

								</div>

							</div>

						</div>

						<div class="yydda">

							<img class="yyddaimg" src="__XIAOHE__/images/index3.png">

							<div class="yyddaa">

								<div class="yyddaaa"  style="font-size:20px;">绿动</div>

								<div class="yyddaab"  style="font-size:15px;">您的健康，就是我最大的快乐</div>

							</div>

						</div>

						<div class="hyyjfk2">

							<div class="hyyjfk2a" v-for="(value1,key1) in list">

								<div class="hyyjfk2ab">

									{{value1.name}}

								</div>

								<div v-if="value1.type == '1'">

									<div class="hyyjfk2aa" v-for="(value2,key2) in value1.dxt">

										<!-- <el-radio v-model="value1.radio" :label='key2'>{{value2.name}}</el-radio> -->

										<van-radio-group v-model="value1.radio">

											<van-radio :name='key2'>{{value2.name}}</van-radio>

										</van-radio-group>

									</div>

								</div>

								<div class="hyyjfk2ac" v-else-if="value1.type == '2'">

									<van-cell-group>

										<van-field v-model="value1.input" placeholder="" />

									</van-cell-group>

								</div>



								<div class="hyyjfk2ac" v-else-if="value1.type == '3'">

									<van-cell is-link @click="showPopup">{{timeValue}}</van-cell>

									<van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />

									<van-datetime-picker @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()" v-model="currentDate"

									 type="datetime" :min-date="minDate" item-height='30' />

									</van-popup>

								</div>

							</div>

						</div>

<div class="hyyjfk2">	

					

						<div class="yydda" style="border-bottom:0px;">

							

							<div class="yyddaa">

								<div class="yyddaaa" style="font-size:15px;">梁溪区九龙仓时代上城店<br/> </div>

								<div class="yyddaab"  style="font-size:12px;width:100%;">电话：<a href="tel:0510-88788168">88788168</a><br>地址：无锡市梁溪区墨文路164号 

								<!-- <sapn style="float: right;text-align:right;">	 -->

								

								</div>

							</div>

						</div>



						<div class="yydda" style="border-bottom:0px;">

							<!-- <img class="yyddaimg" src="__XIAOHE__/images/index3.png"> -->

							<div class="yyddaa">

								<div class="yyddaaa" style="font-size:15px;">滨湖区瑞廷店</div>

								<div class="yyddaab" style="font-size:12px;">电话：<a href="tel:0510-85888355">85888355</a><br>地址：无锡市滨湖区建筑西路777号瑞廷西郊酒店B1层

							<!-- 	<sapn style="float: right;text-align:right;"> -->	

								</div>

							</div>

							

						</div>







							

								<br>	

						

</div>

						<div class="tijiao">

							<van-button :disabled="disabled" @click="dianji()" plain hairline type="primary" icon="smile">提交</van-button>

						</div>

					</div>

					<div class="jszc">

						君亿视觉

					</div>

				</div>

			</div>

		</div>

	</body>

</html>





<script>

	new Vue({

		el: '#app',

		data: function() {

			return {

				show: false,

				disabled:false,

				currentDate: new Date(),

				minDate: new Date(),

				changeDate: new Date(),

				timeValue: '时间',

				list: [{

						id: 1,

						name: '请输入您的姓名',

						input: null,

						type: 2

					},

					{

						id: 2,

						name: '请选择您的性别',

						radio: null,

						type: 1,

						dxt: [{

								name: '男'

							},

							{

								name: '女'

							}

						]

					},

					{

						id: 2,

						name: '请输入您的手机号',

						type: 2,

						input: null

					},

					{

						id: 2,

						name: '请输入您的家庭地址',

						type: 2,

						input: null

					},

					{

						id: 2,

						name: '请选择您的到店时间',

						type: 3,

						input: null

					},

					{

						id: 1,

						name: '请选择预约的门店？',

						radio: null,

						type: 1,

						dxt: [{

								name: '梁溪区九龙仓时代上城店'

							},

							{

								name: '滨湖区瑞廷店'

							}

						]

					}

				]

			}

		},



		methods: {

			changeFn() { // 值变化是触发

				this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)

			},

			confirmFn() { // 确定按钮

				var timeValue = this.timeFormat(this.currentDate);

				this.timeValue = timeValue

				this.show = false;

				

				console.log(this.currentDate)

				console.log(this.timeValue)

			},

			cancelFn() {

				this.show = true;

			},

			timeFormat(time) { // 时间格式化 2019-09-08

				let year = time.getFullYear();

				let month = time.getMonth() + 1;

				let day = time.getDate();

				let hours = time.getHours();

				let minutes = time.getMinutes();

				

				return year + '-' + month + '-' + day +' '+ hours+':'+minutes

			},

			showPopup() {

				this.show = true;

			},

			dianji() {

				var that = this

				var list = this.list

				var name = null

				var sex = null

				var tel = null

				var address = null

				var shoptime = null

				var shopname = null

				if (list[0].input == null) {

					vant.Toast.fail('请输入您的名字');

				} else if (list[1].radio == null) {

					vant.Toast.fail('请选择您的性别');

				} else if (list[2].input == null) {

					vant.Toast.fail('请输入您的手机号');

				} else if (list[3].input == null) {

					vant.Toast.fail('请填写您的家庭住址');

				} else if (that.timeValue == '时间') {

					vant.Toast.fail('请选择到店时间');

				} else if (list[5].radio == null) {

					vant.Toast.fail('请填写您预约的门店');

				} else {

					name = list[0].input

					sex = list[1].radio

					tel = list[2].input

					address = list[3].input

					shoptime = that.changeDate

					shopname = list[5].dxt[list[5].radio].name 

					console.log(name)

					console.log(sex)

					console.log(tel)

					console.log(address)

					console.log(shoptime)

					console.log(shopname)

					axios.post('/index/index/yydd', {

							name: name,

							sex: sex+1,

							tel: tel,

							address: address,

							shoptime: shoptime,

							shopname: shopname,

						})

						.then(function(response) {

							console.log(response);

							if(response.data == "ok"){

								vant.Toast.success('提交成功');

								that.disabled = true

							}else{

								alert(response.data);

							}

						})

						.catch(function(error) {

							console.log(error);

						});

				}

			}

		}

	})

</script>

<script>

	var swiper = new Swiper('.swiper-container', {

		autoplay: {

			delay: 3000,

			stopOnLastSlide: false,

			disableOnInteraction: true,

		},

	});

</script>

